<template>
  <div class="app-container">
    <div class="filter-container">
      <el-form inline>
        <el-form-item label="订单号：" class="filter-item">
          <el-input placeholder="请输入订单号" size="medium" v-model="orderNo"></el-input>
        </el-form-item>
        <el-form-item label="订单状态：" class="filter-item">
          <el-select v-model="status" size="medium">
            <el-option v-for="(item, index) in statusList" :key="index" :label="item.name" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="买家手机号：" class="filter-item">
          <el-input placeholder="请输入买家手机号" size="medium" v-model="mobile"></el-input>
        </el-form-item>
        <el-form-item label="分销员手机号：" class="filter-item">
          <el-input placeholder="请输入分销员手机号" size="medium" v-model="inviteMobile"></el-input>
        </el-form-item>
        <el-form-item class="filter-item right">
          <el-button icon="el-icon-search" plain type="primary" @click="search" size="medium">搜索</el-button>
          <el-button icon="el-icon-setting" plain type="primary" @click="resetSearch" size="medium">重置</el-button>
        </el-form-item>
      </el-form>
      <el-form inline>
        <el-form-item label="订单导出：" class="filter-item">
          <el-date-picker
            value-format="timestamp"
            v-model="timeList"
            type="daterange"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :default-time="['00:00:00', '23:59:59']">
          </el-date-picker>
        </el-form-item>
        <el-form-item class="filter-item">
          <el-button icon="el-icon-download" plain type="primary" size="medium" @click="clickToExportOrder">导出订单</el-button>
        </el-form-item>
      </el-form>
    </div>
    <table-list :data="orderList">
      <template slot="columns">
        <el-table-column fixed="left" label="订单号" align="center" width="230px">
          <template slot-scope="scope">
            <div>订单号：{{ scope.row.orderNo }}</div>
            <div>下单时间：{{ scope.row.createTime}}</div>
          </template>
        </el-table-column>
        <el-table-column label="订单信息" align="center" min-width="300px">
          <template slot-scope="scope">
            <div class="flex flex-item--center" v-for="(item, index) in scope.row.ordersProductsList" :key="index">
              <el-popover placement="top-start" trigger="hover">
                <img :src="item.productsCoverCn" class="previewImage">
                <img :src="item.productsCoverCn" class="thumbnail" slot="reference">
              </el-popover>
              <div class="block-right">
                <div>{{item.productsNameCn}}</div>
                <div>{{item.skuDescCn | specFilter}}</div>
                <div>数量：{{item.count}}</div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="分销员" align="center" min-width="120px">
          <template slot-scope="scope">
            {{ scope.row.inviteMobile }}
          </template>
        </el-table-column>
        <el-table-column label="买家" align="center" min-width="120px">
          <template slot-scope="scope">
            {{ scope.row.mobile }}
          </template>
        </el-table-column>
        <el-table-column label="实收款" align="center" min-width="100px">
          <template slot-scope="scope">
            {{ scope.row.payAmount | divideFilter }}
          </template>
        </el-table-column>
        <el-table-column label="状态" align="center" min-width="100px">
          <template slot-scope="scope">
            {{ scope.row.status | statusFilter}}
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" align="center" min-width="220px">
          <template slot-scope="scope">
            <el-button plain type="primary" size="mini" @click="clickToOrderDetail(scope.row)">查看详情</el-button>
            <el-button plain type="primary" size="mini" @click="clickToLogistic(scope.row)" v-show="scope.row.status == 2 || scope.row.status == 3">查看物流</el-button>
            <el-button plain type="primary" size="mini" @click="clickToDeliver(scope.row)" v-show="scope.row.status == 1">发货</el-button>
          </template>
        </el-table-column>
      </template>
    </table-list>

    <!-- 查看物流 -->
    <el-dialog title="查看物流" :visible.sync="logisticVisible" width="500px" @close="logisticVisible = false">
      <el-form label-position="left" style="margin-left:20px">
        <!-- <el-form-item label="物流公司：">
          {{logisticList.expressNo}}
        </el-form-item> -->
        <el-form-item label="物流单号：">
          {{logisticList.expressNo}}
        </el-form-item>
        <el-form-item label="派件人：" v-if="logisticList.expressDetail && logisticList.expressDetail.data">
          {{logisticList.expressDetail.data.courierId}}
        </el-form-item>
        <el-form-item label="物流状态：" v-if="logisticList.expressDetail && logisticList.expressDetail.data">
          {{logisticList.expressDetail.data.status}}
        </el-form-item>
        <!-- <div style="height: 300px;">
          <el-steps direction="vertical" :active="1">
            <el-step title="步骤 1"></el-step>
            <el-step title="步骤 2"></el-step>
            <el-step title="步骤 3" description="这是一段很长很长很长的描述性文字"></el-step>
          </el-steps>
        </div> -->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="logisticVisible = false" size="small">取 消</el-button>
        <el-button type="primary" @click="logisticVisible = false" size="small">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 发货 -->
    <el-dialog title="发货" :visible.sync="deliverVisible" width="300px" @close="deliverVisible = false">
      <el-form label-position="top" style="margin-left:20px">
        <el-form-item label="">
          <el-input v-model="logistic.expressNo" placeholder="请输入物流单号" style="width:90%" :maxlength="20" size="medium"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="deliverVisible = false" size="small">取 消</el-button>
        <el-button type="primary" @click="deliverSure" size="small">确 定</el-button>
      </div>
    </el-dialog>

    <list-pagination :total="total" :page="page" :pageSize="pageSize" :handleSizeChange="handleSizeChange" :handleCurrentChange="handleCurrentChange"></list-pagination>
    <order-dialog :visible="orderDialogVisible" @closeDialog="orderDialogVisible = false" :dialogData="orderDetail"></order-dialog>
  </div>
</template>

<script>
import list from '@/mixins/List'
import table from '@/components/Table'
import listPagination from '@/components/ListPagination'
import orderDialog from './components/orderDialog'
import { getOrderList, getOrderDetail, getLogistic, deliverLogistic } from '@/api/order'

export default {
  name: 'orderList',
  components: {
    'table-list': table,
    listPagination,
    orderDialog
  },
  mixins: [list],
  extends: {},
  props: {},
  data () {
    return {
      orderNo: '',
      mobile: '',
      inviteMobile: '',
      name: '',
      status: '',
      orderList: [],
      statusList: [
        {
          name: '全部',
          value: ''
        },
        {
          name: '待支付',
          value: 0
        },
        {
          name: '待发货',
          value: 1
        },
        {
          name: '待收货',
          value: 2
        },
        {
          name: '交易成功',
          value: 3
        },
        {
          name: '交易关闭',
          value: 4
        }
      ],
      orderDetail: {},
      orderDialogVisible: false,
      timeList: [],
      logisticList: [],
      logisticVisible: false,
      deliverVisible: false,
      logistic: {
        orderNo: '',
        expressNo: ''
      }
    }
  },
  computed: {},
  directives: {},
  filters: {},
  created () {},
  mounted () {
    if (this.$route.query.mobile) {
      this.inviteMobile = this.$route.query.mobile
    }
    this.getList()
  },
  watch: {},
  methods: {
    resetSearch () {
      this.orderNo = ''
      this.mobile = ''
      this.inviteMobile = ''
      this.name = ''
      this.status = ''
      this.startTime = ''
      this.endTime = ''
    },
    async getList () {
      let { data } = await getOrderList({
        orderNo: this.orderNo,
        mobile: this.mobile,
        inviteMobile: this.inviteMobile,
        status: this.status,
        page: this.page,
        pageSize: this.pageSize
      })
      this.orderList = data.list
      this.total = data.total
    },
    search () {
      this.page = 1
      this.getList()
    },
    clickToExportOrder () {
      if (this.timeList.length !== 2) {
        this.$message({
          type: 'warning',
          message: '请选择导出日期范围'
        })
        return
      }
      let href = `${process.env.VUE_APP_API}/manage/orders_manage/orderExportforLease?startTime=${this.timeList[0]}&endTime=${this.timeList[1]}&mobile=${this.mobile}&inviteMobile=${this.inviteMobile}&orderNo=${this.orderNo}&status=${this.status}`
      let a = document.createElement('a')
      a.href = href
      a.click()
    },
    async clickToOrderDetail ({ orderNo }) {
      let { data } = await getOrderDetail({
        orderNo
      })
      this.orderDetail = data
      this.orderDialogVisible = true
    },
    async clickToLogistic ({ orderNo }) {
      let { data } = await getLogistic({ orderNo })
      this.logisticList = data
      this.logisticList.expressDetail = JSON.parse(data.expressDetail)
      this.logisticVisible = true
    },
    clickToDeliver ({ orderNo }) {
      this.logistic.orderNo = orderNo
      this.deliverVisible = true
    },
    async deliverSure () {
      await deliverLogistic({
        orderNo: this.logistic.orderNo,
        expressNo: this.logistic.expressNo
      })
      this.deliverVisible = false
      this.getList()
    }
  }
}
</script>
<style lang="scss" scoped>
</style>
